<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="stable/static/css/site.css" rel="stylesheet" type="text/css">
    <link href="stable/static/css/print.css" rel="stylesheet" type="text/css" media="print">
    <link href="stable/static/css/prettify.css" rel="stylesheet" type="text/css">
    <link href="//www.google.com/images/icons/product/chrome-16.png" rel="icon" type="image/ico">
    <link href="stable/static/css/api.css" rel="stylesheet" type="text/css">
    <title>chrome.devtools.panels - chrome插件中文开发文档(非官方)</title>
  </head>
  <body>
    <a id="top"></a>
    <div id="header">{Header content}</div>
    <a id="gc-topnav-anchor"></a>
    <div id="gc-topnav">
      <h1>Google Chrome Extensions</h1>
      <ul id="home" class="gc-topnav-tabs">
        <li id="home_link">
          <a href="index.html" title="Google Chrome Extensions home page"><div>Home</div></a>
        </li>
        <li id="docs_link">
          <a href="docs.html" title="Official Google Chrome Extensions documentation"><div>Docs</div></a>
        </li>
        <li id="faq_link">
          <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions"><div>FAQ</div></a>
        </li>
        <li id="samples_link">
          <a href="samples.html" title="Sample Extensions (with source code)"><div>Samples</div></a>
        </li>
        <li id="group_link">
          <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum"><div>Group</div></a>
        </li>
        <li id="so_link">
          <a href="http://stackoverflow.com/questions/tagged/google-chrome-extension" title="[google-chrome-extension] tag on Stack Overflow"><div>Questions?</div></a>
        </li>
      </ul>
    </div>
    <div id="gc-container">
      <div id="gc-sidebar">
        <ul 
            class="level1 ">
          <li class="level2">
                <a href="getstarted.html" class="level2 ">Getting Started</a>
          </li>
          <li class="level2">
                <a href="overview.html" class="level2 ">Overview</a>
          </li>
          <li class="level2">
                <a href="whats_new.html" class="level2 ">What's New?</a>
          </li>
          <li class="level2">
                <a href="devguide.html" class="level2 ">Developer's Guide</a>
              <ul 
                  class="level2 ">
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Browser UI</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="browserAction.html" class="level4 ">Browser Actions</a>
                      </li>
                      <li class="level4">
                            <a href="contextMenus.html" class="level4 ">Context Menus</a>
                      </li>
                      <li class="level4">
                            <a href="notifications.html" class="level4 ">Desktop Notifications</a>
                      </li>
                      <li class="level4">
                            <a href="omnibox.html" class="level4 ">Omnibox</a>
                      </li>
                      <li class="level4">
                            <a href="options.html" class="level4 ">Options Pages</a>
                      </li>
                      <li class="level4">
                            <a href="override.html" class="level4 ">Override Pages</a>
                      </li>
                      <li class="level4">
                            <a href="pageAction.html" class="level4 ">Page Actions</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Browser Interaction</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="bookmarks.html" class="level4 ">Bookmarks</a>
                      </li>
                      <li class="level4">
                            <a href="cookies.html" class="level4 ">Cookies</a>
                      </li>
                      <li class="level4">
                            <a href="devtools.html" class="level4 ">Developer Tools</a>
                      </li>
                      <li class="level4">
                            <a href="events.html" class="level4 ">Events</a>
                      </li>
                      <li class="level4">
                            <a href="history.html" class="level4 ">History</a>
                      </li>
                      <li class="level4">
                            <a href="management.html" class="level4 ">Management</a>
                      </li>
                      <li class="level4">
                            <a href="tabs.html" class="level4 ">Tabs</a>
                      </li>
                      <li class="level4">
                            <a href="windows.html" class="level4 ">Windows</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Implementation</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="a11y.html" class="level4 ">Accessibility</a>
                      </li>
                      <li class="level4">
                            <a href="event_pages.html" class="level4 ">Event Pages</a>
                      </li>
                      <li class="level4">
                            <a href="contentSecurityPolicy.html" class="level4 ">Content Security Policy</a>
                      </li>
                      <li class="level4">
                            <a href="content_scripts.html" class="level4 ">Content Scripts</a>
                      </li>
                      <li class="level4">
                            <a href="xhr.html" class="level4 ">Cross-Origin XHR</a>
                      </li>
                      <li class="level4">
                            <a href="i18n.html" class="level4 ">Internationalization</a>
                      </li>
                      <li class="level4">
                            <a href="messaging.html" class="level4 ">Message Passing</a>
                      </li>
                      <li class="level4">
                            <a href="permissions.html" class="level4 ">Optional Permissions</a>
                      </li>
                      <li class="level4">
                            <a href="npapi.html" class="level4 ">NPAPI Plugins</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Finishing</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="hosting.html" class="level4 ">Hosting</a>
                      </li>
                      <li class="level4">
                            <a href="external_extensions.html" class="level4 ">Other Deployment Options</a>
                      </li>
                    </ul>
                </li>
              </ul>
          </li>
          <li class="level2">
                <a href="tutorials.html" class="level2 ">Tutorials</a>
              <ul 
                  class="level2 ">
                <li class="level3">
                      <a href="tut_migration_to_manifest_v2.html" class="level3 ">Manifest V2</a>
                </li>
                <li class="level3">
                      <a href="tut_debugging.html" class="level3 ">Debugging</a>
                </li>
                <li class="level3">
                      <a href="tut_analytics.html" class="level3 ">Google Analytics</a>
                </li>
                <li class="level3">
                      <a href="tut_oauth.html" class="level3 ">OAuth</a>
                </li>
              </ul>
          </li>
          <li class="level2">
                <span class="level2">Reference</span>
              <ul 
                  class="level2 ">
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Formats</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="manifest.html" class="level4 ">Manifest Files</a>
                      </li>
                      <li class="level4">
                            <a href="match_patterns.html" class="level4 ">Match Patterns</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                      <a href="permission_warnings.html" class="level3 ">Permission Warnings</a>
                </li>
                <li class="level3">
                      <a href="api_index.html" class="level3 ">chrome.* APIs</a>
                </li>
                <li class="level3">
                      <a href="api_other.html" class="level3 ">Other APIs</a>
                </li>
              </ul>
          </li>
          <li class="level2">
                <span class="level2">More</span>
              <ul 
                  class="level2 ">
                <li class="level3">
                      <a href="http://code.google.com/chrome/webstore/docs/index.html" class="level3 ">Chrome Web Store</a>
                </li>
                <li class="level3">
                      <a href="http://code.google.com/chrome/apps/docs/developers_guide.html" class="level3 ">Hosted Apps</a>
                </li>
                <li class="level3">
                      <a href="themes.html" class="level3 ">Themes</a>
                </li>
              </ul>
          </li>
        </ul>
      </div>
      <div id="gc-pagecontent">
        <h1 class="page_title">chrome.devtools.panels</h1>
        
        
        
        <div id="toc">
          <h2>Contents</h2>
          <ol>
            <li>
              <a href=#overview>Overview</a>
            </li>
            <li>
              <a href=#overview-examples>Examples</a>
            </li>
            <li>
              <a href="#apiReference">API reference: chrome.devtools.panels</a>
              <ol>
                  <li><a href="#types">Types</a><ol>  <li>    <a href="#type-ElementsPanel">ElementsPanel</a><ol><li>      <a href="#ElementsPanel-methods">Methods</a>      <ol>        <li><a href="#method-ElementsPanel-createSidebarPane">createSidebarPane</a></li>      </ol>    </li></ol><ol><li>      <a href="#ElementsPanel-events">Events</a>      <ol>        <li><a href="#event-ElementsPanel-onSelectionChanged">onSelectionChanged</a></li>      </ol>    </li></ol>  </li>  <li>    <a href="#type-ExtensionPanel">ExtensionPanel</a><ol><li>      <a href="#ExtensionPanel-methods">Methods</a>      <ol>        <li><a href="#method-ExtensionPanel-createStatusBarButton">createStatusBarButton</a></li>      </ol>    </li></ol><ol><li>      <a href="#ExtensionPanel-events">Events</a>      <ol>        <li><a href="#event-ExtensionPanel-onSearch">onSearch</a></li>        <li><a href="#event-ExtensionPanel-onShown">onShown</a></li>        <li><a href="#event-ExtensionPanel-onHidden">onHidden</a></li>      </ol>    </li></ol>  </li>  <li>    <a href="#type-ExtensionSidebarPane">ExtensionSidebarPane</a><ol><li>      <a href="#ExtensionSidebarPane-methods">Methods</a>      <ol>        <li><a href="#method-ExtensionSidebarPane-setHeight">setHeight</a></li>        <li><a href="#method-ExtensionSidebarPane-setExpression">setExpression</a></li>        <li><a href="#method-ExtensionSidebarPane-setObject">setObject</a></li>        <li><a href="#method-ExtensionSidebarPane-setPage">setPage</a></li>      </ol>    </li></ol><ol><li>      <a href="#ExtensionSidebarPane-events">Events</a>      <ol>        <li><a href="#event-ExtensionSidebarPane-onShown">onShown</a></li>        <li><a href="#event-ExtensionSidebarPane-onHidden">onHidden</a></li>      </ol>    </li></ol>  </li>  <li>    <a href="#type-Button">Button</a><ol><li>      <a href="#Button-methods">Methods</a>      <ol>        <li><a href="#method-Button-update">update</a></li>      </ol>    </li></ol><ol><li>      <a href="#Button-events">Events</a>      <ol>        <li><a href="#event-Button-onClicked">onClicked</a></li>      </ol>    </li></ol>  </li></ol></li>
                  <li><a href="#properties">Properties</a><ol>  <li>    <a href="#property-elements">elements</a>  </li></ol></li>
                  <li><a href="#methods">Methods</a><ol>  <li><a href="#method-create">create</a></li>  <li><a href="#method-setOpenResourceHandler">setOpenResourceHandler</a></li></ol></li>
                  
                  
              </ol>
            </li>
          </ol>
        </div>

<p id="classSummary">
Use the <code>chrome.devtools.panels</code> module to integrate
your extension into Developer Tools window UI: create your own panels, access
existing panels, and add sidebars.
</p><p>
See <a href="devtools.html">DevTools APIs summary</a> for
general introduction to using Developer Tools APIs.
</p>

<h2 id="overview">Overview</h2>

<p>
Each extension panel and sidebar is displayed as a separate HTML page. All
extension pages displayed in the Developer Tools window have access to all
modules in <code>chrome.devtools</code> API, as well as to
<a href="extension.html">chrome.extension</a> API. Other extension APIs are not
available to the pages within Developer Tools window, but you may invoke them
by sending a request to the background page of your extension, similarly to how
it's done in the <a href="overview.html#contentScripts">content scripts</a>.
</p><p>
You can use the <code><a href="#method-setOpenResourceHandler"
>setOpenResourceHandler()</a></code> method to install a
callback function that handles user requests to open a resource (typically,
a click on a resource link in the Developer Tools window). At most one of the
installed handlers gets called; users can specify (using the Developer Tools
Settings dialog) either the default behavior or an extension to handle resource
open requests. If an extension calls <code>setOpenResourceHandler()</code>
multiple times, only the last handler is retained.
</p>
<h2 id="overview-examples">Examples</h2>
<p>The following code adds a panel contained in <code>Panel.html</code>,
represented by <code>FontPicker.png</code> on the Developer Tools toolbar
and labeled as <em>Font Picker</em>:</p>

<pre>
chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html"
                              function(panel) { ... });
</pre>
<p>The following code adds a sidebar pane contained in
<code>Sidebar.html</code> and titled <em>Font Properties</em> to the Elements
panel, then sets its height to <code>8ex</code>:
<pre>
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
    function(sidebar) {
      sidebar.setPage("Sidebar.html");
      sidebar.setHeight("8ex");
    });
</pre>
<p>
This screenshot demonstrates the effect the above examples would have on
Developer Tools window:

<img src="stable/static/images/devtools-panels.png"
     style="margin-left: 20px"
     width="686" height="289"
     alt="Extension icon panel on DevTools toolbar" />
</p>

<p>
You can find examples that use this API in
<a href="samples.html#Chrome&#32;Query">Samples</a>.
</p>
        <h2 id="apiReference">API Reference: chrome.devtools.panels</h2>
        <div class="api_reference">
            <h3 id="types">Types</h3>
              <div>
                <h3 id="type-ElementsPanel">ElementsPanel</h3>
                <div>
                  <dt><span class="type_name">  (    <span id="typeTemplate">object</span>  )</span></dt>
              <dd>
                    Represents the Elements panel.
                  </dd>    <h4 id="ElementsPanel-methods">
                    Methods of <a href="#type-ElementsPanel">ElementsPanel</a>
                  </h4>
                  <dd><dl>      <div>
                      <h4 id="method-ElementsPanel-createSidebarPane">createSidebarPane</h4>
                      <div class="summary lower">
                        <span>ElementsPanel.createSidebarPane</span>(<span>string <span class="variable">title</span></span>)
                      </div>
                      <div class="description">
                    <p>
                          Creates a pane within panel's sidebar.
                        </p>    <h4>Parameters</h4>
                        <dl>
                          <div>  <a name="property-createSidebarPane-title"></a>  <dt>    <span class="variable">title</span>    <span class="property">      (                <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    Text that is displayed in sidebar caption.  </dd></div>
                        </dl>
                        <h4>Callback function</h4><p>      If you specify the <em>callback</em> parameter, it should      specify a function that looks like this:</p><pre>function(<a href="devtools.panels.html#type-ExtensionSidebarPane">ExtensionSidebarPane</a> result) <span class="subdued">{...}</span>;</pre><dl>  <div>  <a name="property-callback-result"></a>  <dt>    <span class="variable">result</span>    <span class="property">      (                <span id="typeTemplate"><a href="devtools.panels.html#type-ExtensionSidebarPane">ExtensionSidebarPane</a></span>      )    </span>  </dt>  <dd>    An ExtensionSidebarPane object for created sidebar pane.  </dd></div></dl>
                      </div>
                    </div>
              </dl></dd>
                  <h4 id="ElementsPanel-events">
                    Events of <a href="#type-ElementsPanel">ElementsPanel</a>
                  </h4>
                  <dd><dl>      <div>
                      <h4 id="event-ElementsPanel-onSelectionChanged">onSelectionChanged</h4>
                      <div class="summary">
                        <span class="subdued">ElementsPanel.</span>onSelectionChanged<span class="subdued">.addListener</span>(function()<span class="subdued"> {...}</span>);
                      </div>
                      <div class="description">
                    <p>
                          Fired when an object is selected in the panel.
                        </p>  </div>
                    </div>
              </dl></dd>
                </div>
              </div>
              <div>
                <h3 id="type-ExtensionPanel">ExtensionPanel</h3>
                <div>
                  <dt><span class="type_name">  (    <span id="typeTemplate">object</span>  )</span></dt>
              <dd>
                    Represents a panel created by extension.
                  </dd>    <h4 id="ExtensionPanel-methods">
                    Methods of <a href="#type-ExtensionPanel">ExtensionPanel</a>
                  </h4>
                  <dd><dl>      <div>
                      <h4 id="method-ExtensionPanel-createStatusBarButton">createStatusBarButton</h4>
                      <div class="summary">
                        <span><a href="devtools.panels.html#type-Button">Button</a> ExtensionPanel.createStatusBarButton</span>(<span>string <span class="variable">iconPath</span></span>, <span>string <span class="variable">tooltipText</span></span>, <span>boolean <span class="variable">disabled</span></span>)
                      </div>
                      <div class="description">
                    <p>
                          Appends a button to the status bar of the panel.
                        </p>    <h4>Parameters</h4>
                        <dl>
                          <div>  <a name="property-createStatusBarButton-iconPath"></a>  <dt>    <span class="variable">iconPath</span>    <span class="property">      (                <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    Path to the icon of the button. The file should contain a 64x24-pixel image composed of two 32x24 icons. The left icon is used when the button is inactive; the right icon is displayed when the button is pressed.  </dd></div><div>  <a name="property-createStatusBarButton-tooltipText"></a>  <dt>    <span class="variable">tooltipText</span>    <span class="property">      (                <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    Text shown as a tooltip when user hovers the mouse over the button.  </dd></div><div>  <a name="property-createStatusBarButton-disabled"></a>  <dt>    <span class="variable">disabled</span>    <span class="property">      (                <span id="typeTemplate">boolean</span>      )    </span>  </dt>  <dd>    Whether the button is disabled.  </dd></div>
                        </dl>
                        
                      </div>
                    </div>
              </dl></dd>
                  <h4 id="ExtensionPanel-events">
                    Events of <a href="#type-ExtensionPanel">ExtensionPanel</a>
                  </h4>
                  <dd><dl>      <div>
                      <h4 id="event-ExtensionPanel-onSearch">onSearch</h4>
                      <div class="summary">
                        <span class="subdued">ExtensionPanel.</span>onSearch<span class="subdued">.addListener</span>(function(<span>string <span class="variable">action</span></span>, <span class="optional">string <span class="variable">queryString</span></span>)<span class="subdued"> {...}</span>);
                      </div>
                      <div class="description">
                    <p>
                          Fired upon a search action (start of a new search, search result navigation, or search being canceled).
                        </p>      <h4>Listener Parameters</h4>
                          <dl>
                            <div>  <a name="property-onSearch-action"></a>  <dt>    <span class="variable">action</span>    <span class="property">      (                <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    Type of search action being performed.  </dd></div><div>  <a name="property-onSearch-queryString"></a>  <dt>    <span class="variable">queryString</span>    <span class="property">      (        <span class="optional">optional</span>        <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    Query string (only for 'performSearch').  </dd></div>
                          </dl>
                      </div>
                    </div>
                    <div>
                      <h4 id="event-ExtensionPanel-onShown">onShown</h4>
                      <div class="summary">
                        <span class="subdued">ExtensionPanel.</span>onShown<span class="subdued">.addListener</span>(function(<span><a href="windows.html#type-Window">windows.Window</a> <span class="variable">window</span></span>)<span class="subdued"> {...}</span>);
                      </div>
                      <div class="description">
                    <p>
                          Fired when the user switches to the panel.
                        </p>      <h4>Listener Parameters</h4>
                          <dl>
                            <div>  <a name="property-onShown-window"></a>  <dt>    <span class="variable">window</span>    <span class="property">      (                <span id="typeTemplate"><a href="windows.html#type-Window">windows.Window</a></span>      )    </span>  </dt>  <dd>    The <code>window</code> object of panel's page.  </dd></div>
                          </dl>
                      </div>
                    </div>
                    <div>
                      <h4 id="event-ExtensionPanel-onHidden">onHidden</h4>
                      <div class="summary">
                        <span class="subdued">ExtensionPanel.</span>onHidden<span class="subdued">.addListener</span>(function()<span class="subdued"> {...}</span>);
                      </div>
                      <div class="description">
                    <p>
                          Fired when the user switches away from the panel.
                        </p>  </div>
                    </div>
              </dl></dd>
                </div>
              </div>
              <div>
                <h3 id="type-ExtensionSidebarPane">ExtensionSidebarPane</h3>
                <div>
                  <dt><span class="type_name">  (    <span id="typeTemplate">object</span>  )</span></dt>
              <dd>
                    A sidebar created by the extension.
                  </dd>    <h4 id="ExtensionSidebarPane-methods">
                    Methods of <a href="#type-ExtensionSidebarPane">ExtensionSidebarPane</a>
                  </h4>
                  <dd><dl>      <div>
                      <h4 id="method-ExtensionSidebarPane-setHeight">setHeight</h4>
                      <div class="summary lower">
                        <span>ExtensionSidebarPane.setHeight</span>(<span>string <span class="variable">height</span></span>)
                      </div>
                      <div class="description">
                    <p>
                          Sets the height of the sidebar.
                        </p>    <h4>Parameters</h4>
                        <dl>
                          <div>  <a name="property-setHeight-height"></a>  <dt>    <span class="variable">height</span>    <span class="property">      (                <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    A CSS-like size specification, such as <code>'100px'</code> or <code>'12ex'</code>.  </dd></div>
                        </dl>
                        
                      </div>
                    </div>
                    <div>
                      <h4 id="method-ExtensionSidebarPane-setExpression">setExpression</h4>
                      <div class="summary lower">
                        <span>ExtensionSidebarPane.setExpression</span>(<span>string <span class="variable">expression</span></span>, <span class="optional">string <span class="variable">rootTitle</span></span>)
                      </div>
                      <div class="description">
                    <p>
                          Sets an expression that is evaluated within the inspected page. The result is displayed in the sidebar pane.
                        </p>    <h4>Parameters</h4>
                        <dl>
                          <div>  <a name="property-setExpression-expression"></a>  <dt>    <span class="variable">expression</span>    <span class="property">      (                <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    An expression to be evaluated in context of the inspected page. JavaScript objects and DOM nodes are displayed in an expandable tree similar to the console/watch.  </dd></div><div>  <a name="property-setExpression-rootTitle"></a>  <dt>    <span class="variable">rootTitle</span>    <span class="property">      (        <span class="optional">optional</span>        <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    An optional title for the root of the expression tree.  </dd></div>
                        </dl>
                        <h4>Callback function</h4><p>      If you specify the <em>callback</em> parameter, it should      specify a function that looks like this:</p><pre>function() <span class="subdued">{...}</span>;</pre><dl>  </dl>
                      </div>
                    </div>
                    <div>
                      <h4 id="method-ExtensionSidebarPane-setObject">setObject</h4>
                      <div class="summary lower">
                        <span>ExtensionSidebarPane.setObject</span>(<span>string <span class="variable">jsonObject</span></span>, <span class="optional">string <span class="variable">rootTitle</span></span>)
                      </div>
                      <div class="description">
                    <p>
                          Sets a JSON-compliant object to be displayed in the sidebar pane.
                        </p>    <h4>Parameters</h4>
                        <dl>
                          <div>  <a name="property-setObject-jsonObject"></a>  <dt>    <span class="variable">jsonObject</span>    <span class="property">      (                <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    An object to be displayed in context of the inspected page. Evaluated in the context of the caller (API client).  </dd></div><div>  <a name="property-setObject-rootTitle"></a>  <dt>    <span class="variable">rootTitle</span>    <span class="property">      (        <span class="optional">optional</span>        <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    An optional title for the root of the expression tree.  </dd></div>
                        </dl>
                        <h4>Callback function</h4><p>      If you specify the <em>callback</em> parameter, it should      specify a function that looks like this:</p><pre>function() <span class="subdued">{...}</span>;</pre><dl>  </dl>
                      </div>
                    </div>
                    <div>
                      <h4 id="method-ExtensionSidebarPane-setPage">setPage</h4>
                      <div class="summary lower">
                        <span>ExtensionSidebarPane.setPage</span>(<span>string <span class="variable">path</span></span>)
                      </div>
                      <div class="description">
                    <p>
                          Sets an HTML page to be displayed in the sidebar pane.
                        </p>    <h4>Parameters</h4>
                        <dl>
                          <div>  <a name="property-setPage-path"></a>  <dt>    <span class="variable">path</span>    <span class="property">      (                <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    Relative path of an extension page to display within the sidebar.  </dd></div>
                        </dl>
                        
                      </div>
                    </div>
              </dl></dd>
                  <h4 id="ExtensionSidebarPane-events">
                    Events of <a href="#type-ExtensionSidebarPane">ExtensionSidebarPane</a>
                  </h4>
                  <dd><dl>      <div>
                      <h4 id="event-ExtensionSidebarPane-onShown">onShown</h4>
                      <div class="summary">
                        <span class="subdued">ExtensionSidebarPane.</span>onShown<span class="subdued">.addListener</span>(function(<span class="optional"><a href="windows.html#type-Window">windows.Window</a> <span class="variable">window</span></span>)<span class="subdued"> {...}</span>);
                      </div>
                      <div class="description">
                    <p>
                          Fired when the sidebar pane becomes visible as a result of user switching to the panel that hosts it.
                        </p>      <h4>Listener Parameters</h4>
                          <dl>
                            <div>  <a name="property-onShown-window"></a>  <dt>    <span class="variable">window</span>    <span class="property">      (        <span class="optional">optional</span>        <span id="typeTemplate"><a href="windows.html#type-Window">windows.Window</a></span>      )    </span>  </dt>  <dd>    The <code>window</code> object of the sidebar page, if one was set with the <code>setPage()</code> method.  </dd></div>
                          </dl>
                      </div>
                    </div>
                    <div>
                      <h4 id="event-ExtensionSidebarPane-onHidden">onHidden</h4>
                      <div class="summary">
                        <span class="subdued">ExtensionSidebarPane.</span>onHidden<span class="subdued">.addListener</span>(function()<span class="subdued"> {...}</span>);
                      </div>
                      <div class="description">
                    <p>
                          Fired when the sidebar pane becomes hidden as a result of the user switching away from the panel that hosts the sidebar pane.
                        </p>  </div>
                    </div>
              </dl></dd>
                </div>
              </div>
              <div>
                <h3 id="type-Button">Button</h3>
                <div>
                  <dt><span class="type_name">  (    <span id="typeTemplate">object</span>  )</span></dt>
              <dd>
                    A button created by the extension.
                  </dd>    <h4 id="Button-methods">
                    Methods of <a href="#type-Button">Button</a>
                  </h4>
                  <dd><dl>      <div>
                      <h4 id="method-Button-update">update</h4>
                      <div class="summary lower">
                        <span>Button.update</span>(<span class="optional">string <span class="variable">iconPath</span></span>, <span class="optional">string <span class="variable">tooltipText</span></span>, <span class="optional">boolean <span class="variable">disabled</span></span>)
                      </div>
                      <div class="description">
                    <p>
                          Updates the attributes of the button. If some of the arguments are omitted or <code>null</code>, the corresponding attributes are not updated.
                        </p>    <h4>Parameters</h4>
                        <dl>
                          <div>  <a name="property-update-iconPath"></a>  <dt>    <span class="variable">iconPath</span>    <span class="property">      (        <span class="optional">optional</span>        <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    Path to the new icon of the button.  </dd></div><div>  <a name="property-update-tooltipText"></a>  <dt>    <span class="variable">tooltipText</span>    <span class="property">      (        <span class="optional">optional</span>        <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    Text shown as a tooltip when user hovers the mouse over the button.  </dd></div><div>  <a name="property-update-disabled"></a>  <dt>    <span class="variable">disabled</span>    <span class="property">      (        <span class="optional">optional</span>        <span id="typeTemplate">boolean</span>      )    </span>  </dt>  <dd>    Whether the button is disabled.  </dd></div>
                        </dl>
                        
                      </div>
                    </div>
              </dl></dd>
                  <h4 id="Button-events">
                    Events of <a href="#type-Button">Button</a>
                  </h4>
                  <dd><dl>      <div>
                      <h4 id="event-Button-onClicked">onClicked</h4>
                      <div class="summary">
                        <span class="subdued">Button.</span>onClicked<span class="subdued">.addListener</span>(function()<span class="subdued"> {...}</span>);
                      </div>
                      <div class="description">
                    <p>
                          Fired when the button is clicked.
                        </p>  </div>
                    </div>
              </dl></dd>
                </div>
              </div>
            <h3 id="properties">Properties</h3>
              <div>
                <h3 id="property-elements">elements</h3>
                <div class="summary">
                  <span>chrome.devtools.panels.elements</span>
                </div>
                <div>
                  <dt><span class="property">elements</span> <span class="type_name">  (    <span id="typeTemplate"><a href="devtools.panels.html#type-ElementsPanel">ElementsPanel</a></span>  )</span></dt>
              <dd>
                    Elements panel.
                  </dd>  </div>
              </div>
            <h3 id="methods">Methods</h3>
              <div>
                <h4 id="method-create">create</h4>
                <div class="summary lower">
                  <span>chrome.devtools.panels.create</span>(<span>string <span class="variable">title</span></span>, <span>string <span class="variable">iconPath</span></span>, <span>string <span class="variable">pagePath</span></span>)
                </div>
                <div class="description">
              <p>
                    Creates an extension panel.
                  </p>    <h4>Parameters</h4>
                  <dl>
                    <div>  <a name="property-create-title"></a>  <dt>    <span class="variable">title</span>    <span class="property">      (                <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    Title that is displayed next to the extension icon in the Developer Tools toolbar.  </dd></div><div>  <a name="property-create-iconPath"></a>  <dt>    <span class="variable">iconPath</span>    <span class="property">      (                <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    Path of the panel's icon relative to the extension directory.  </dd></div><div>  <a name="property-create-pagePath"></a>  <dt>    <span class="variable">pagePath</span>    <span class="property">      (                <span id="typeTemplate">string</span>      )    </span>  </dt>  <dd>    Path of the panel's HTML page relative to the extension directory.  </dd></div>
                  </dl>
                  <h4>Callback function</h4><p>      If you specify the <em>callback</em> parameter, it should      specify a function that looks like this:</p><pre>function(<a href="devtools.panels.html#type-ExtensionPanel">ExtensionPanel</a> panel) <span class="subdued">{...}</span>;</pre><dl>  <div>  <a name="property-callback-panel"></a>  <dt>    <span class="variable">panel</span>    <span class="property">      (                <span id="typeTemplate"><a href="devtools.panels.html#type-ExtensionPanel">ExtensionPanel</a></span>      )    </span>  </dt>  <dd>    An ExtensionPanel object representing the created panel.  </dd></div></dl>
                </div>
              </div>
              <div>
                <h4 id="method-setOpenResourceHandler">setOpenResourceHandler</h4>
                <div class="summary lower">
                  <span>chrome.devtools.panels.setOpenResourceHandler</span>()
                </div>
                <div class="description">
              <p>
                    Specifies the function to be called when the user clicks a resource link in the Developer Tools window. To unset the handler, either call the method with no parameters or pass null as the parameter.
                  </p>  </div>
              </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    window.bootstrap = {
      api_names: [{"name":"alarms"},{"name":"bookmarks"},{"name":"browserAction"},{"name":"browsingData"},{"name":"commands"},{"name":"contentSettings"},{"name":"contextMenus"},{"name":"cookies"},{"name":"debugger"},{"name":"declarativeWebRequest"},{"name":"devtools.inspectedWindow"},{"name":"devtools.network"},{"name":"devtools.panels"},{"name":"downloads"},{"name":"events"},{"name":"extension"},{"name":"fileBrowserHandler"},{"name":"fontSettings"},{"name":"history"},{"name":"i18n"},{"name":"idle"},{"name":"input.ime"},{"name":"management"},{"name":"omnibox"},{"name":"pageAction"},{"name":"pageCapture"},{"name":"permissions"},{"name":"privacy"},{"name":"proxy"},{"name":"runtime"},{"name":"scriptBadge"},{"name":"storage"},{"name":"tabs"},{"name":"topSites"},{"name":"tts"},{"name":"ttsEngine"},{"name":"types"},{"name":"webNavigation"},{"name":"webRequest"},{"name":"webstore"},{"last":true,"name":"windows"}].concat(
          [{"name":"experimental.bluetooth"},{"name":"experimental.devtools.audits"},{"name":"experimental.devtools.console"},{"name":"experimental.discovery"},{"name":"experimental.identity"},{"name":"experimental.infobars"},{"name":"experimental.offscreenTabs"},{"name":"experimental.processes"},{"name":"experimental.record"},{"name":"experimental.speechInput"},{"name":"experimental.systemInfo.cpu"},{"name":"experimental.systemInfo.storage"},{"last":true,"name":"experimental.usb"}]),
      branchInfo: {"channels":[{"path":"stable","name":"Stable"},{"path":"dev","name":"Dev"},{"path":"beta","name":"Beta"},{"path":"trunk","name":"Trunk"}],"current":"stable","showWarning":false}
    };
  </script>
  <div id="gc-footer">
    <div class="text">
      <p>
        Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>,
        the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
        Attribution 3.0 License</a>, and code samples are licensed under the
        <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>.
      </p>
      <p>
        ©2012 Google
      </p>
      <script src="stable/static/js/branch.js" type="text/javascript"></script>
      <script src="stable/static/js/sidebar.js" type="text/javascript"></script>
      <script src="stable/static/js/prettify.js" type="text/javascript"></script>
      <script>
        (function() {
          // Auto syntax highlight all pre tags.
          var preElements = document.getElementsByTagName('pre');
          for (var i = 0; i < preElements.length; i++)
            preElements[i].classList.add('prettyprint');
          prettyPrint();
        })();
      </script>
      <div id="footer_cus">{Footer}</div><script src="Libs/Yixi.js"></script><script src="http://s9.cnzz.com/stat.php?id=4928336&web_id=4928336" language="JavaScript"></script>
  
    </div>
  </div>
</html>
